<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 富文本编辑器 js引入-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/ueditor.all.min.js}">
	
</script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8"
	th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/common.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript">
	$(document).ready(function() {
		var height = $(window).height();
		$("#addDiv").css({
			"height" : height
		});
		$(".villageDiv").css({"height":height - $("#searchDiv form").height() - 30 - 2});
	});
	window.onresize = function() {
		var height = $(window).height();
		$("#addDiv").css({
			"height" : height
		});
		$(".villageDiv").css({"height":height - $("#searchDiv form").height() - 30 - 2});
	}
</script>
<style type="text/css">
li{
	text-align:left;
    color: #000000; /* 文字颜色 */  
    display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */  
    line-height: 30px; /* 行高 */  
    padding: 4px 20px; /* 内部填充的距离 */  
    text-decoration: none; /* 不显示超链接下划线 */  
    white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */  
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */  
li:hover  
{  
    background-color: #bfcbd6; /* 背景色 */  
    color: #465c71; /* 文字颜色 */  
    text-decoration: none; /* 不显示超链接下划线 */  
}  
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */  
li:active  
{  
    background-color: #465c71; /* 背景色 */  
    color: #cfdbe6; /* 文字颜色 */  
    text-decoration: none; /* 不显示超链接下划线 */  
}  

</style>
</head>
<body class="layui-layout-body">
	<div id="addDiv" align="center" style="overflow: auto;">
		<div id="resultDiv" style="display: flex; justify-content: center; height: 100%;margin-top: 15px;min-width: 1000px;">
			<div style="width: 45%; height: 100%;" id="searchDiv">
				<form id="addForm" class="layui-form layui-form-pane" th:action="@{/village/village_view}"
					method="post">
					<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 100px;">
								<select id="cityId" name="cityId" lay-filter="cityId">
									<option value="110100" th:selected="${cityId != null ? cityId == 110100 : 'false'}">北京市</option>
									<option value="350100" th:selected="${cityId != null ? cityId == 350100 : 'false'}">福州市</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 100px;">
								<select id="areaId" name="areaId">
									<option th:if="${data != null && data.data != null}" th:selected="${areaId != null && areaId == item.id}"
										th:each="item : ${data.data}" th:value="${item.id}">[[${item.areaName}]]</option>
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 100px;">
								<input name="villageName" placeholder="小区名称" class="layui-input"
									 th:value="${villageName != null ? villageName : ''}" maxlength="30">
							</div>
						</div>
						<a class="layui-btn" onclick="searchVillage()">搜索</a>
					</div>
				</form>
				<div style="border: solid 1px; width: 100%; height: 100%; display: inline-block;overflow: auto;" class="villageDiv">
					<ul id="baseDataUl">
						<li th:if="${villages != null && villages.data != null}" class="layui-nav-item layui-nav-itemed"
						onclick="select(this)"
						th:each="item : ${villages != null ? villages.data : ''}" th:value="${item.id}">[[${item.communityName}]]</li>
					</ul>
				</div>
			</div>
			<div style="width: 45%; height: 100%; margin-left: 20px;" align="left">
				<form id="addForm" class="layui-form layui-form-pane">
					<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline" style="width: 100px;">
								<label class="layui-form-label">已选小区</label>
							</div>
						</div>
					</div>
				</form>
				<div style="border: solid 1px; width: 100%; height: 100%; display: inline-block;overflow: auto;" class="villageDiv">
					<ul id="selectUl">
						<li onclick='removeView(this)' th:if="${communityVillage != null}" th:each="item:${communityVillage}" 
									th:value="${item.villageId}" th:text="${item.villageName}" />
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" th:inline="javascript">
        var contextRoot = /*[[@{/}]]*/ '';
		layui.use([ 'form' ], function() {
			var formObj = layui.form;
			formObj.on('select(cityId)', function(data) {
				$("#areaId").empty();
				var index = layer.load(2, {time: 10*1000});
				$.ajax({type : "POST",data : {'cityId' : data.value},url : contextRoot+"/village/area",dataType : "json",
					success : function(msg) {
						if (msg.meta.code == 0) {
							$.each(msg.data.data, function(index, obj) {
								$("#areaId").append("<option value='"+obj.id+"'>" + obj.areaName + "</option>");
							});
							formObj.render();
						} else {
							layer.msg(msg.meta.message);
						}
						layer.close(index); 
					}
				});
			});
		});
		function searchVillage(){
			var index = layer.load(1, {time: 10*1000});
			$(".layui-layer-shade").css({"background-color":"#000000","opacity":"0.4"});
			$("#baseDataUl").empty();
			var valArr = new Array()
			$.each($("#selectUl li"),function(index,obj){
				valArr[index] = $(obj).attr("value");
			});
			$.ajax({type : "POST",data : $("#addForm").serialize(),url : contextRoot+"/village/search",dataType : "json",
				success : function(msg) {
					if (msg.meta.code == 0) {
						$.each(msg.data.data, function(index, obj) {
							var id = obj.id;
							if($.inArray(id, valArr) == -1){
								var communityName = obj.communityName;
								$("#baseDataUl").append("<li class='layui-nav-item layui-nav-itemed' onclick='select(this)' value='"+id+"'>"+communityName+"</li>");
							}
						});
					} else {
						layer.msg(msg.meta.message);
					}
					layer.close(index); 
				}
			});
		}
		function select(viewObj){
			var value = $(viewObj).attr("value");
			var text = $(viewObj).text();
			$("#selectUl").prepend("<li onclick='removeView(this)' value='"+value+"'>" + text + "</li>");
			removeView(viewObj);
		}
		function removeView(viewObj){
			var id = $($(viewObj).parent()).attr("id");
			$(viewObj).remove();
			if("selectUl" === id){
				var value = $(viewObj).attr("value");
				var text = $(viewObj).text();
				$("#baseDataUl").prepend("<li onclick='select(this)' value='"+value+"'>" + text + "</li>");
			}
		}
	</script>
</body>
</html>